<template>
    <div>
        <el-card style="margin: 10px; border: 1px solid gold">
            <!-- 查询条件 -->
            <el-collapse
                    accordion
                    v-model="data.activeName"
                    class="card-bg">
                <el-collapse-item name="1">
                    <template #title>
                        <div class="innerHeader">
                          评论管理
                        </div>
                    </template>
                    <div style="display: flex;"
                         class="card-search">
                        <el-form :inline="true"
                                 :model="data.formList"
                                 size="default"
                                 label-width="100px">
                            <el-form-item label="用户ID">
                                <el-input placeholder="请输入用户ID"
                                            v-model="data.formList.userId"
                                            style="width: 200px"
                                            @keyup.enter.native="getData">
                                  </el-input>
                            </el-form-item>
                            <el-form-item label="商家ID">
                                <el-input placeholder="请输入商家ID"
                                            v-model="data.formList.shopId"
                                            style="width: 200px"
                                            @keyup.enter.native="getData">
                                  </el-input>
                            </el-form-item>
                            <el-form-item label="订单ID">
                                <el-input placeholder="请输入订单ID"
                                            v-model="data.formList.orderId"
                                            style="width: 200px"
                                            @keyup.enter.native="getData">
                                  </el-input>
                            </el-form-item>
                            <el-form-item label="骑手ID">
                                <el-input placeholder="请输入骑手ID"
                                            v-model="data.formList.riderId"
                                            style="width: 200px"
                                            @keyup.enter.native="getData">
                                  </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-card style="margin: 10px; border: 1px solid gold">
            <!-- 操作按钮区 -->
            <div style="margin:10px 0;">
<!--                <el-button-->
<!--                        type="info"-->
<!--                        icon="Download"-->
<!--                        @click="downloadExcelTemplate()">-->
<!--                  下载模板-->
<!--                </el-button>-->
<!--                <el-button-->
<!--                        type="primary"-->
<!--                        icon="Upload"-->
<!--                        @click="uploadExcel()">-->
<!--                  导入-->
<!--                </el-button>-->
                <el-button
                        type="warning"
                        icon="DocumentDelete"
                        @click="deleteDataMany()">
                  删除
                </el-button>
                <div style="float:right;">
                    <el-button
                          type="primary"
                          @click="queryData()"
                          icon="Search"
                          :loading="data.isSearch">
                    查询
                    </el-button>
                    <el-button
                          @click="resetData()"
                          icon="Close">
                    清空
                    </el-button>
<!--                    <el-button-->
<!--                          @click="excelData()">-->
<!--                    导出数据-->
<!--                    </el-button>-->
                </div>
            </div>

            <!-- 表格呈现 -->
            <el-table
                  :data="data.tableData"
                  :height="data.screenHeight - data.otherHeight"
                  tooltip-effect="dark"
                  style="width:100%"
                  stripe
                  size="default"
                  border
                  @selection-change="selectionChanged">
                <el-table-column
                        type="selection"
                        width="60">
                </el-table-column>
                 <el-table-column
                        prop="id"
                        label="id"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="userId"
                        label="用户ID"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="shopId"
                        label="商品ID"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="orderId"
                        label="订单ID"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="riderId"
                        label="骑手ID"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="userName"
                        label="用户名"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="content"
                        label="内容"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="releaseTime"
                        label="时间"
                        width="180"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="parentId"
                        label="回复id"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="400">
                    <template #default="scope">
                        <el-link
                                style="margin-right: 20px"
                                @click="toDetail(scope)"
                                type="primary"
                                size="small"
                                :underline="false">
                          查看详情
                        </el-link>
                        <el-link
                                @click="toDelete(scope)"
                                type="primary"
                                size="small"
                                :underline="false">
                          删除
                        </el-link>
                    </template>
                </el-table-column>
              </el-table>

            <el-pagination
                      v-model:current-page="data.pageConfig.currentPage"
                      v-model:page-size="data.pageConfig.pageSize"
                      class="customPage mt-10"
                      background
                      :page-sizes="[10, 20, 50]"
                      :current-page="data.pageConfig.currentPage"
                      :page-size="data.pageConfig.pageSize"
                      :total="data.pageConfig.total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      layout="sizes,total, ->, prev, pager, next">
              </el-pagination>
        </el-card>
        <ItemDialog ref="itemDialog" :type="data.type"></ItemDialog>
        <Upload ref="uploadExcelRef" @callback="uploadExcelCallback"></Upload>
    </div>
</template>
<script lang="ts" setup>
    import Api from '@/api/Comment/api_comment.js'
    import ItemDialog from './Item.vue'
    import { reactive, ref, defineProps, toRefs, onMounted} from 'vue'
    import Upload from "@/utils/oss/upload.vue";
    import { useStore } from "vuex";
    import { useRouter } from 'vue-router'
    import {ElMessage, ElMessageBox} from "element-plus";

    const store = useStore();
    const router = useRouter()

    // Data
    const data = reactive({
        context: { componentParent: this },// context: 父对象
        screenHeight: window.innerHeight,// screenHeight:控制高度自适应-页面高度
        otherHeight: 310,// otherHeight:控制高度自适应-表格外的高度
        isSearch: false, // isSearch:控制搜索状态
        detailUrl: '/name/comment/item', // detailUrl:详情页面地址
        selectedRows: {}, // selectedRows:选中行对象
        // formList:搜索条件对象 分页控制对象
        formList: {
            userId: '',
            shopId: '',
            orderId: '',
            riderId: '',
            userName: '',
            content: '',
            releaseTime: '',
            parentId: ''
        },
        // tableData:表格数据
        tableData: [],
        // OperatorLogParam:用于记录日志
        OperatorLogParam: {
            operateContent: '',
            operateFeatures: '',
            operateState: '',
            operateType: ''
        },
        activeName: '1',
        // 分页配置
        pageConfig: {
            currentPage: 1,
            pageSize: 10,
            total: 1000
        },
        // dialog
        type: '',
    })
    // 解构抛出 直接使用
    // const { type} = toRefs(data)

    // Mounted
    onMounted(() => {
        getData();
        // window.onresize = () => {
        //     return (() => {
        //         data.screenHeight = window.innerHeight
        //     })()
        // }

        // 菜单界面生成时日志记录
        // const islog = Vue.prototype.$config.ISLOG;
        // if (true==islog){
        //     this.OperatorLogParam.operateFeatures = '菜单点击'
        //     this.OperatorLogParam.operateType = LogType.Query
        //     this.OperatorLogParam.operateState = '成功'
        //     OperatorLog.setOperationLog(this.OperatorLogParam)
        // }
    })

    // Methods
    const getData = () => {
        // 查询方法
        // 查询参数
        const params = {
            userId : data.formList.userId,
            shopId : data.formList.shopId,
            orderId : data.formList.orderId,
            riderId : data.formList.riderId,
            userName : data.formList.userName,
            content : data.formList.content,
            releaseTime : data.formList.releaseTime,
            parentId : data.formList.parentId,
            pageIndex : data.pageConfig.currentPage,
            pageSize : data.pageConfig.pageSize
        }
        // 后台请求
        Api.selpage4comment(params).then(res=> {
            if (res.code === 200){
                data.tableData = res.data.records
                data.pageConfig.total = res.data.total
                data.isSearch = false
            }

            // 日志记录
            // data.OperatorLogParam.operateContent = JSON.stringify(params)
            // data.OperatorLogParam.operateFeatures = '查询列表'
            // data.OperatorLogParam.operateType = LogType.Query
            // data.OperatorLogParam.operateState = '成功'
            // OperatorLog.setOperationLog(this.OperatorLogParam)

        })
    }
    // 添加记录
    const itemDialog = ref();
    // 下载模板
    const downloadExcelTemplate = () => {
        const params = {}
        Api.downloadExcelTemplate(params).then(data => {
            console.log(data)
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
            const blobUrl = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = blobUrl
            a.download = 'Comment.xls'
            a.click()
            window.URL.revokeObjectURL(blobUrl)
        })
    }

    // 导入数据
    const uploadExcelRef = ref();
    const uploadExcel = () => {
        // const uploadExcelUrl = Api.uploadExcelUrl();
        uploadExcelRef.value.init(this.SHOP_SERVER + '/comment/uploadExcel');
    }

    const deleteDataMany = () => {
        // 删除多条记录
        const datas = data.selectedRows
        const dataids = []
        if (!datas || !datas.length || datas.length === 0) {
            ElMessage({
                message: '请选择数据',
                type: 'warning',
            })
        } else {
            for (const i of datas) {
                dataids.push(i.id)
            }
            ElMessageBox.confirm(
                    '确认删除？',
                    '警告',
                    {
                        confirmButtonText: '确认删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
            ).then(() => {
                Api.dels4comment(dataids).then(res => {
                    if (res.code === 200){
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getData()
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: '删除失败',
                        })
                    }

                    // 日志记录
                    // this.OperatorLogParam.operateContent = JSON.stringify(dataids)
                    // this.OperatorLogParam.operateFeatures = '删除记录'
                    // this.OperatorLogParam.operateType = LogType.Query
                    // this.OperatorLogParam.operateState = '成功'
                    // OperatorLog.setOperationLog(this.OperatorLogParam)
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除',
                })
            })
        }
    }

    const queryData = () => {
        data.isSearch = true
        data.pageConfig.currentPage = 1
        getData()
    }

    const resetData = () => {
        // 重置事件
        data.isSearch = false
        for (const key in data.formList) {
            data.formList[key] = ''
        }
    }

    const excelData = () => {
        const params = {}
        Api.excelData4comment(params).then(data => {
            const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
            const blobUrl = URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.href = blobUrl
            a.download = 'Comment.xls'
            a.click()
            window.URL.revokeObjectURL(blobUrl)
        })
    }
    /**
     导入后的回调方法
     @param action: put/delete， put=上传，delete=删除
     @param status: true/false，true=成功，false=失败
     @param groupId: 附件组ID
     @param response: 响应内容
     **/
    const uploadExcelCallback = (action, status, groupId, response) =>{
        console.log("Success")
        // if (action === 'put' && status) {
        //     this.$notify({
        //         type: 'success',
        //         title: '导入成功',
        //         message: response.message,
        //         duration: 5000
        //     })
        // } else {
        //     this.$notify({
        //         type: 'error',
        //         title: '导入失败',
        //         message: response.message,
        //         duration: 5000
        //     })
        // }
    }
    const selectionChanged = (val: number) => {
        // 选中行变化事件
        data.selectedRows = val
    }
    const toDetail = (scope) => {
        data.type = "detail"
        itemDialog.value.init(scope.row.id, data.type);
    }

    const toDelete = (scope) => {
        ElMessageBox.confirm(
                '确认删除？',
                '警告',
                {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
        ).then(() => {
            console.log(scope.row.id)
            Api.del4comment(scope.row.id).then(res => {
                console.log(res)
                if (res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getData()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '删除失败',
                    })
                }
            })

            // 日志记录
            // this.OperatorLogParam.operateContent = JSON.stringify(dataids)
            // this.OperatorLogParam.operateFeatures = '删除记录'
            // this.OperatorLogParam.operateType = LogType.Query
            // this.OperatorLogParam.operateState = '成功'
            // OperatorLog.setOperationLog(this.OperatorLogParam)
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
    }

    const handleCurrentChange = (val: number) => {
        // 页码切换事件
        data.pageConfig.currentPage = val
        getData()
    }

    const handleSizeChange = (val: number) => {
        // 页面条数变化事件
        data.pageConfig.pageSize = val
        getData()
    }

    const activated = () => {
        getData()
    }

</script>
<style lang="css" scoped>
/* 单页面样式 */
>>>.el-table .cell {
  white-space: nowrap
}
</style>
